<template>
    <div class="header">
        <p class="iconh">&#xe7b7;<span>奖</span></p>
        <p><span class="searcher">&#xe61f;</span><input type="text" placeholder="Louis Vuitton"/></p>
        <p>&#xe64c;</p>
    </div>
</template>

<script>
export default {
  name: 'homeheader'
}
</script>

<style lang="scss">
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_0q2hpekr8wgj.eot');
  src: url('//at.alicdn.com/t/font_931790_0q2hpekr8wgj.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_0q2hpekr8wgj.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_0q2hpekr8wgj.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_0q2hpekr8wgj.svg#iconfont') format('svg');
}
.header{
  height: 52px;
  width: 100%;
    p{
    float: left;
    &:nth-child(1){
        margin-top: 4px;
        margin-left: 6px;
        position: relative;
        font-family: iconfont;
        font-size: 35px;
        color: red;
        span{
            position: absolute;
            display: block;
            height: 20px;
            width: 20px;
            top: 0px;
            left: 20px;
            background: red;
            color: white;
            font-size: 15px;
            line-height: 20px;
            text-align: center;
            border-radius: 5px;
        }
    };
    &:nth-child(2){
        margin-top: 10px;
        margin-left: 14px;
        height: 30px;
        width: 220px;
        // background: rebeccapurple;
        position: relative;
        span{
            font-family: iconfont;
            font-size: 26px;
            // display: block;
            float: left;
            position: absolute;
            top: 1px;
            left: -1px;
        }
        input{
            padding-left: 30px;
            //怪异盒模型
            // display: block;
            float: left;
            // margin-top: 4px;
            // margin-left: 10px;
            // display: inline;
            height: 30px;
            width: 268px;
            border: none;
            border-radius: 26px;
            background: #F5F5F5;

        }
    };
    &:nth-child(3){
        font-family: iconfont;
        font-size: 20px;
        margin-top: 12px;
        margin-left: 60px;
    }
}
}

</style>
